<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/2.sign.css">
    <link rel="stylesheet" href="font_3425654_dzkifbkbxbn/iconfont.css">
</head>

<body>
    <top></top>
    <!-- 中心区域 -->
    <div class="core">
        <img src="img/登入图片.jpg" alt="">
        <!-- 白色正方形区域 -->
        <div class="zheng">
            <div class="xiaozheng">
                <!-- 头部空白区域 -->
                <div class="blank"></div>
                <!-- 登录总区域 -->
                <div class="register">
                    <!-- 密码短信登录头部区域 -->
                    <div class="PShort">
                        <a href="javascript:;" class="PWD">账号密码登录</a>
                        <a href="javascript:;" class="short">短信快捷登录</a>
                    </div>
                    <!-- 表单区域 -->
                    <!-- 账号密码登录区域 -->
                    <div class="zhanghao">
                        <form action="">
                            <input type="text" placeholder="邮箱/手机号码/安踏帐号" id="username">
                            <input type="text" placeholder="密码" id="userpass">
                            <input type="submit" value="立即登录" class="sing_in">
                            <span class="msg"></span>
                        </form>


                    </div>
                    <!-- 短信快捷登录区域 -->
                    <div class="duanxin">
                        <form>
                            <input type="text" placeholder="手机号码">
                            <input type="text" placeholder="请输入下方图片验证码">
                            <input type="text" id="huoqu" placeholder="请点击右边图片验证码">
                            <a href="javascript:;" class="duan">获取图片验证码</a>
                            <input type="submit" value="立即登录" class="sing_in">
                        </form>


                    </div>
                </div>
                <!-- 其他方式登录区域 -->
                <div class="other">
                    <fieldset>
                        <legend>其他方式登录</legend>
                    </fieldset>
                    <div class="weitou">
                        <a href="javascript:;" class="iconfont icon-logo-wechat"></a>
                    </div>
                </div>
                <!-- 账号注册区域 -->
                <div class="reg">
                    <a href="3.register.html">登录注册</a>&nbsp;|
                    <a href="javascript:;">忘记密码</a>
                </div>
            </div>

        </div>
    </div>
    <bottom></bottom>
</body>

</html>
<script src="js/jQuery.js"></script>
<script src="js/2.sign.js"></script>
<script>
    $("top").load("1.header.html");
    $("bottom").load("1.bottom.html");

    //点击账号登录自身盒子显示,其他盒子隐藏
    // show显示
    // hide隐藏
    $(".PWD").click(function () {
        $(".zhanghao").show()
        $(".duanxin").hide()
    })
    //点击短信快捷登录自身盒子显示,其他盒子隐藏
    $(".short").click(function () {
        $(".duanxin").show()
        $(".zhanghao").hide()
    })


    // //验证验证码
    var int = document.getElementById("huoqu").value;//获取用户输入的值
    var p = document.querySelector(".duan");
    int.onblur = function () {
        //判断用户输入与验证码的大写一致(不分大小写)
        if (int.toUpperCase() == p.toUpperCase()) {
            div.innerHTML = "";
        } else {
            div.innerHTML = "此项必须填写";
        }
    }

    // //随机4位验证码
    function code() {
        //将数字、小写字母及大写字母输入
        var str = "1234567890qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM";
        //给一个空字符串
        var res = '';
        //循环4次，得到4个字符
        for (var i = 0; i < 4; i++) {
            //将得到的结果给字符串，调用随机函数，0最小数，62表示数字加字母的总数
            res += str[random(0, 62)];
        }
        p.innerHTML = res;
    }
    code();         //调用验证码函数
    p.onclick = code; //点击也可以刷新验证码

    function random(max, min) {
        return Math.round(Math.random() * (max - min) + min);
    }

</script>